<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="text/babel" data-presets="env,stage-3,react">
      const {
        ReactDOM: { render },
        WebChat: {
          Components: { BasicWebChat, Composer },
          createDirectLine,
          hooks: { useLanguage }
        }
      } = window;

      let currentLanguage;

      const InvokeUseLanguage = () => {
        currentLanguage = useLanguage()[0];

        return false;
      };

      async function languageBecome(expected) {
        return pageConditions.became(`language changed to "${expected}"`, () => currentLanguage === expected, 1000);
      }

      run(async function () {
        const directLine = createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });

        const store = testHelpers.createStoreWithOptions();

        async function renderWebChat(props = {}) {
          render(
            <Composer directLine={directLine} store={store} {...props}>
              <BasicWebChat />
              <InvokeUseLanguage />
            </Composer>,
            document.getElementById('webchat')
          );
        }

        renderWebChat();

        // WHEN: "echo Hello, World!" is sent.
        await pageConditions.uiConnected();
        await pageObjects.sendMessageViaSendBox('echo Hello, World!', { waitForSend: true });

        // THEN: The bot should reply with 2 activities.
        await pageConditions.minNumActivitiesShown(3);

        // THEN: There should be 3 activities in total: 1 from user, followed by 2 from the bot.
        await host.snapshot();

        // WHEN: Language is set to "zh-HK".
        renderWebChat({ locale: 'zh-HK' });

        // THEN: Calling `useLanguage()` should return ['zh-HK'].
        await languageBecome('zh-HK');

        // THEN: All texts should be in Chinese (Traditional).
        await host.snapshot();

        // WHEN: Language is set to "yue".
        renderWebChat({ locale: 'yue' });

        // THEN: Calling `useLanguage()` should return ['yue'].
        await languageBecome('yue');

        // THEN: All texts should be in Chinese (Yue).
        await host.snapshot();
      });
    </script>
  </body>
</html>
